<template>
    <div class="layout">
        <Layout>
            <Sider breakpoint="md" style="background-color:#fff;">
                <div style="margin-top:10px;">
                    <Button type="primary" @click="Shows(1)">新闻</Button>
                    <Button type="primary" @click="Shows(2)">产品</Button>
                </div>
                <Tree :data="data1" @on-select-change="Selected" ref="tree"></Tree>
            </Sider>
            <Layout>
                <Content :style="{margin: '20px', background: '#fff', minHeight: '220px'}">
                    <!-- 添加新闻 -->
                    <Button type="primary" style="margin-bottom:10px" @click="ToAxios">增加</Button>
                    <Modal v-model= "modal1" title= "确认框" :closable="false" :mask-closable="false">
                        <Form :model="formItem" :label-width="80" ref="formItem" :rules="ruleValidate">
                            <FormItem label="新闻名:" prop="title">
                                <Input v-model="formItem.title" placeholder="请输入新闻名"></Input>
                            </FormItem>
                            <FormItem label="新闻内容:" prop="contents">
                                <Input v-model="formItem.contents" type="textarea" :rows="4" placeholder="请输入新闻内容" />
                            </FormItem>
                        </Form>
                        <div slot="footer">
                            <Button type="primary" @click="handleSubmit('formItem')">提交</Button>
                            <Button @click="handleReset('formItem')" style="margin-left: 8px">重置</Button>
                            <Button @click="handleExit('formItem')" style="margin-left: 8px">关闭</Button>
                        </div>
                    </Modal>
                    <!-- 批量删除新闻 -->
                    <Button type="primary" style="margin-bottom:10px" @click="ToDelete">删除</Button>
                    <Table border :columns="columns12" :data="data6">
                        <template slot-scope="{ row }" slot="name">
                            <strong>{{ row.name }}</strong>
                        </template>
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="ToAxios(row)">修改</Button>
                            <Button type="error" size="small" @click="remove(row._id)">删除</Button>
                            <Button type="primary" size="small" @click="comments(row._id)">评论</Button>
                        </template>
                    </Table>
                    <Page :total="total" show-sizer placement="top" style="margin-top:10px;" :page-size="rows" :page-size-opts="[5,10,20]" @on-change="PageChange" @on-page-size-change="PageSizeChange"/>
                </Content>
            </Layout>
            <!-- 评论区 -->
            <Modal v-model="modal11" fullscreen title="评论区">
                <div class="demo-split">
                    <Split v-model="split2" mode="vertical">
                        <div slot="top" class="demo-split-pane" ref="AllComments">
                            <p v-for="(v,i) in commtentArr" :key="i" style="font-size:20px"><strong>{{i+1}}: </strong>{{v}}</p>
                        </div>
                        <div slot="bottom" class="demo-split-pane">
                            <Form :model="formComment" :label-width="80" ref="formComment" :rules="ruleValidate1">
                                <FormItem label="评论:" prop="comment">
                                    <Input v-model="formComment.comment" placeholder="请输入点什么..." type="textarea" :rows="4"></Input>
                                </FormItem>
                            </Form>
                        </div>
                    </Split>
                </div>
                <div slot="footer">
                    <Button type="primary" @click="SubmitComment(formComment)">发表评论</Button>
                    <Button @click="ResetComment(formComment)" style="margin-left: 8px">清空输入</Button>
                    <Button @click="Exit(formComment)" style="margin-left: 8px">关闭评论</Button>
                </div>
            </Modal>
        </Layout>
    </div>
</template>

<script>
export default {
    data(){
        return{
            data1      : [],
            total      : 0,
            num        : '0',
            split2     : 0.7,
            ID         : '',
            CommentId  : '',
            modal1     : false,
            modal11    : false,
            page       : 1,
            rows       : 5,
            CateId     : '',
            commtentArr: [],
            formComment: {
                comment: ''
            },
            ruleValidate1:{
                comment:[
                    { required: true, message: '评论不能为空', trigger: 'change',type:'string'}
                ]
            },
            formItem: {
                title   : '',
                contents: ''
            },
            ruleValidate: {
                title: [
                    { required: true, message: '值不能为空', trigger: 'change',type:'string'}
                ],
                contents: [
                    { required: true, message: '值不能为空', trigger: 'change',type:'string'}
                ]
            },
            columns12: [
                    {
                        type : 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key  : 'title'
                    },
                    {
                        title : '简介',
                        key   : 'contents',
                        render: (h, p) => {
                            return h('p', {
                                style:{
                                    width       : '210px',
                                    overflow    : 'hidden',
                                    whiteSpace  : 'nowrap',
                                    textOverflow: 'ellipsis'
                                },
                                domProps: {
                                    innerHTML: p.row.contents
                                }
                            });
                        }
                    },
                    {
                        title : '评论数',
                        key   : 'comments',
                        render: (h, p) => {
                            return h('div', {
                                domProps: {
                                    innerHTML: `评论数:(<strong style="color:red">${this.num}</strong>)`
                                }
                            });
                        }
                    },
                    {
                        title: '操作',
                        slot : 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                data6: []
        }
    },
    methods:{
        SubmitComment(a){
            this.$refs['formComment'].validate((valid) => {
                if (valid) {
                    if(this.CommentId){
                        this.axios({
                             url   : `http://localhost:3000/news/comments/`,
                             method: 'post',
                             data  : {
                                comments: a.comment,
                                newId   : this.CommentId
                            }
                        }).then(res=>{
                            this.comments(this.CommentId)
                            this.$refs['formComment'].resetFields();
                        })
                    }
                }else{
                    this.$Message.error('失败!请正确填写');
                }
            })
        },
        ResetComment(a){
            this.$refs['formComment'].resetFields();
        },
        Exit(a){
            this.$refs['formComment'].resetFields();
            this.modal11     = false;
            this.CommentId   = '';
            this.commtentArr = [];
        },
        comments(id){
            if(id){
                this.CommentId = id
                this.axios({
                url   : `http://localhost:3000/news/comments/list`,
                method: 'post',
                data  : {
                    page : this.page,
                    rows : this.rows,
                    newId: id
                }
            }).then(res=>{
                if(res.data.rows.length>0){
                    this.commtentArr = [];
                    for(var i=0;i<res.data.rows.length;i++){
                        this.commtentArr.push(res.data.rows[i].comments)
                    }
                }
                this.modal11 = true;
                // this.data6 = res.data.rows;
                // this.total = res.data.total;
                // if(this.page!=res.data.page){
                //     this.PageChange(res.data.page)
                // }
            })
            }
        },
        // 评论结束
        Shows(type){
            this.axios({
                url   : `http://localhost:3000/cate/list/${type}`,
                method: 'post'
            }).then(res=>{
                this.data1 = res.data
            })
        },
        ShowNews(){
            this.axios({
                url   : `http://localhost:3000/news/list`,
                method: 'post',
                data  : {
                    page  : this.page,
                    rows  : this.rows,
                    cateId: this.CateId
                }
            }).then(res=>{
                this.data6 = res.data.rows;
                this.total = res.data.total;
                if(this.page!=res.data.page){
                    this.PageChange(res.data.page)
                }
            })
        },
        remove (id) {
            this.$Modal.confirm({
                title  : '确认框',
                content: '你确定要删除该条数据吗？',
                onOk   : () => {
                        this.axios({
                            url   : `http://localhost:3000/news/${id}`,
                            method: 'delete'
                        }).then(res=>{
                            this.ShowNews();
                        })
                    this.$Message.info('删除成功');
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        Selected(r,n){
            if(this.$refs['tree'].getSelectedNodes().length==1){
                this.CateId = n._id;
                this.ShowNews();
            }else{
                this.CateId = '';
            }
        },
        PageChange(page){
            this.page = page;
            this.ShowNews();
        },
        PageSizeChange(rows){
            this.rows = rows;
            this.ShowNews();
        },
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.ID){
                            this.axios({
                                url   : `http://localhost:3000/news/${this.ID}`,
                                method: 'put',
                                data  : this.formItem
                                }).then(res=>{
                                this.$refs[name].resetFields();
                                this.ID     = '';
                                this.modal1 = false;
                                this.ShowNews();
                            })
                        }
                        else{
                            this.formItem.cateId = this.CateId
                            this.axios({
                                url   : `http://localhost:3000/news`,
                                method: 'post',
                                data  : this.formItem
                                }).then(res=>{
                                this.$refs[name].resetFields();
                                this.modal1 = false;
                                this.ShowNews();
                            })
                        }
                } else {
                    this.$Message.error('失败!请正确填写');
                }
            })
        },
        handleReset(name){
            this.$refs[name].resetFields();
        },
        handleExit(name){
            this.$refs[name].resetFields();
            this.ID     = '';
            this.modal1 = false;
            this.ShowNews();
        },
        ToAxios(asf){
            if(asf._id){
                this.formItem = asf
                this.ID       = asf._id
                this.modal1   = true;
            }else{
                if(this.CateId){
                    this.modal1 = true;
                }else{
                    this.$Message.info('添加前请点击新闻所属的目录');
                }
            }  
        },
        ToDelete(){
            var ids = []
            var Del = this.DeleteId
            this.$Modal.confirm({
                title  : '确认框',
                content: '你确定要删除吗？',
                onOk   : () => {
                        if(Del.length>0){
                            for(var i=0;i<Del.length;i++){
                                ids.push(Del[i]._id)
                            }
                            this.axios({
                                    url   : `http://localhost:3000/news/removes`,
                                    method: 'post',
                                    data  : {
                                        ids: ids.toString()
                                    }
                                }).then(res=>{
                                    this.getList();
                                })
                            this.DeleteId = []
                            this.$Message.info('删除成功');
                        }else{
                            this.$Message.info('请选择删除对象');
                        }
                        
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            })
        }
    },
    mounted(){
        this.Shows(1);
        this.ShowNews()
    }
}
</script>

<style scoped>
    .layout{
        border       : 1px solid #d7dde4;
        background   : #f5f7f9;
        position     : relative;
        border-radius: 4px;
        overflow     : hidden;
    }
    .demo-split{
        height: 100%;
        border: 1px solid #dcdee2;
    }
    .demo-split-pane{
        padding: 10px;
    }
</style>